<template>
    <el-select placeholder="请选择/Please Choose" v-model="value" multiple collapse-tags @change="handleChange" clearable>
        <template #header>
            <el-checkbox v-model="selectAll" @change="handleSelectAllChange">
                All
            </el-checkbox>
        </template>
        <el-option v-for="(item, index) in items" :key="item.id" :value="item.jx" :disabled="selectAll">{{ item.jx }}</el-option>
    </el-select>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import request from '/@/utils/request'

export default defineComponent({
    name: 'basedataModelSelectAllDialog',
    emits: ['selected'],
    props: {
        value: []
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            items: [] as any[],
            selectAll: false
        })
        const loadData = () => {
            state.loading = true
            request.get('/basicData/acmodel/list',{
                params: {
                    allData: true
                }
            }).then(res => {
                state.items = res?.data || []
            }).finally(() => {
                state.loading = false
            })
        }
        const selectRef = ref();
        onMounted(() => {
            loadData();
        })

        const handleChange = (data: any) => {
            context.emit("selected", data);
        }

        const handleSelectAllChange = (val: any) => {
            if (val) {
               
            }
        }

        return {
            ...toRefs(state),
            ...toRefs(props),
            selectRef,
            handleChange,
            handleSelectAllChange
        }
    }
})
</script>
